<div class="vex vex-theme-os upload" xmlns="http://www.w3.org/1999/html">
    <div class="vex-dialog-form">
        <h5 i18n="@@upload-dicom.title">Upload DICOM data</h5>
        <div class="content">
            <ng-container *ngIf="!selectedWebApp">
                <label i18n="@@upload-dicom.select_the_ae_title">Select the ae title:</label>
                <mat-select [ngModel]="selectedAe" (ngModelChange)="selectedAe = $event">
                    <mat-option *ngFor="let ae of aes" [value]="ae.dicomAETitle" title="{{ae.dicomDescription}}">{{ ae.dicomAETitle }}</mat-option>
                </mat-select>
            </ng-container>
            <ng-container *ngIf="selectedWebApp">
                <label i18n="@@select_the_stow_rs_server">Select the STOW-RS server:</label>
                <mat-select [ngModel]="selectedWebApp" (ngModelChange)="selectedWebApp = $event">
                    <mat-option *ngFor="let webApp of webApps" [value]="webApp" title="{{webApp.dcmWebAppName }}({{webApp.dicomAETitle }},{{webApp.dicomDeviceName}})">{{ webApp.dcmWebAppName }}</mat-option>
                </mat-select>
            </ng-container>
            <!--<input type="file" ng2FileSelect [uploader]="vendorUpload" />-->
            <label i18n="@@upload-dicom.chose_dicom_files_to_upload">Choose DICOM Files to upload:</label>
            <input type="file" [(ngModel)]="file" (change)="fileChange($event)" i18n-placeholder="@@upload_file" placeholder="Upload file"  multiple>
            <div mat-dialog-content>
                <div class="upload_state" *ngFor="let file of fileList">
                    {{file.name}}
                    <span class="text-danger" *ngIf="percentComplete[file.name] && percentComplete[file.name].status">Error {{percentComplete[file.name].status}}</span>
                    <span class="upload_ticker" *ngIf="percentComplete[file.name] && percentComplete[file.name].showLoader && !percentComplete[file.name].showTicker"><i class="fa fa-circle-o-notch fa-spin"></i></span>
                    <span class="upload_ticker" *ngIf="percentComplete[file.name] && percentComplete[file.name].showTicker"><i class="material-icons">check</i></span>
                    <div *ngIf="percentComplete && percentComplete[file.name] && percentComplete[file.name].value">
                        <mat-progress-bar color="primary" mode="determinate" [value]="percentComplete[file.name].value"></mat-progress-bar>
                    </div>
                </div>
            </div>
        </div>
        <div class="dialogbuttons">
            <button class="cancle" type="button" (click)="close(dialogRef)" i18n="@@CLOSE">CLOSE</button>
        </div>
    </div>
</div>